<template>

    <div ref='vantaRef' class="my-background">

        
        <el-form
            :model="form"
            status-icon
            :rules="rules"
            ref="form"
            label-width="100px"
            class="title-container"
            v-show="isLoginShow"    
        >
            <div ><span><img :src="titleImg"></span></div>
        </el-form>


        <transition 
            name="animate__animated animate__bounce"
            enter-active-class="animate__swing"
            leave-active-class="animate__backOutUp"
            appear
        >
            <el-form
                :model="form"
                status-icon
                :rules="rules"
                ref="form"
                label-width="100px"
                class="login-container"
                v-show="isLoginShow"
                
            >
                <h3 class="login_title">系统登录</h3>
                
                <!-- 用户头像 -->
                <div ><span><img class="user-image" :src="userImg"></span></div>
            
                <el-form-item
                    label="用户名"
                    label-width="80px"
                    prop="username"
                    class="username"
                >
                    <el-input
                        type="input"
                        v-model="form.username"
                        authcomplete="off"
                        placeholder="请输入用户名"
                    >
                    </el-input>
                
                </el-form-item>

                <el-form-item
                    label="密码"
                    label-width="80px"
                    prop="password"
                >
                    <el-input
                        type="password"
                        v-model="form.password"
                        authcomplete="off"
                        placeholder="请输入密码"
                    >
                    </el-input>
                
                </el-form-item>

                <el-form-item class="login_submit">
                    <el-button type="primary" class="login_submit" @click="showVerify">登录</el-button>
                </el-form-item>
                <span class="register-font" @click="showRegister()">注册</span> 
                <span class="updatepwd-font " @click="showUpdate()">修改密码</span> 

            </el-form>
        </transition>


        <transition 
            name="animate__animated animate__bounce"
            enter-active-class="animate__swing"
            leave-active-class="animate__backOutUp"
            appear
        >
            <el-form
                :model="form"
                status-icon
                :rules="rules"
                ref="form"
                label-width="100px"
                class="login-container"
                v-show="isRegisterShow"
                
            >
                <h3 class="login_title">注册账号</h3>
                
                <!-- 用户头像 -->
                <!-- <div ><span><img class="user-image" :src="userImg"></span></div> -->
            
                <el-form-item
                    label="用户名"
                    label-width="80px"
                    prop="username"
                    class="username"
                >
                    <el-input
                        type="input"
                        v-model="form.reg_username"
                        authcomplete="off"
                        placeholder="请输入用户名"
                    >
                    </el-input>
                
                </el-form-item>

                <el-form-item
                    label="密码"
                    label-width="80px"
                    prop="password"
                >
                    <el-input
                        type="password"
                        v-model="form.reg_password"
                        authcomplete="off"
                        placeholder="请输入密码"
                    >
                    </el-input>
                
                </el-form-item>

                <el-form-item
                    label="重复密码"
                    label-width="80px"
                    prop="password"
                >
                    <el-input
                        type="password"
                        v-model="form.reg_password2"
                        authcomplete="off"
                        placeholder="请重复输入密码"
                    >
                    </el-input>
                
                </el-form-item>


                <el-form-item class="login_submit">
                    <el-button type="primary" class="login_submit" @click="showVerify">注册</el-button>
                </el-form-item>

                <span class="register-font" @click="showLogin()">返回登陆</span> 

            </el-form>
        </transition>

        <transition 
            name="animate__animated animate__bounce"
            enter-active-class="animate__swing"
            leave-active-class="animate__backOutUp"
            appear
        >
            <el-form
                :model="form"
                status-icon
                :rules="rules"
                ref="form"
                label-width="100px"
                class="login-container"
                v-show="isUpdateShow"
                
            >
                <h3 class="login_title">修改密码</h3>
                
                <!-- 用户头像 -->
                <!-- <div ><span><img class="user-image" :src="userImg"></span></div> -->
            
                <el-form-item
                    label="用户名"
                    label-width="80px"
                    prop="username"
                    class="username"
                >
                    <el-input
                        type="input"
                        v-model="form.up_username"
                        authcomplete="off"
                        placeholder="请输入用户名"
                    >
                    </el-input>
                
                </el-form-item>

                <el-form-item
                    label="原密码"
                    label-width="80px"
                    prop="password"
                >
                    <el-input
                        type="password"
                        v-model="form.old_password"
                        authcomplete="off"
                        placeholder="请输入原密码"
                    >
                    </el-input>
                
                </el-form-item>

                <el-form-item
                    label="新密码"
                    label-width="80px"
                    prop="password"
                >
                    <el-input
                        type="password"
                        v-model="form.new_password"
                        authcomplete="off"
                        placeholder="请输入新密码"
                    >
                    </el-input>
                
                </el-form-item>

                <el-form-item
                    label="重复密码"
                    label-width="80px"
                    prop="password"
                >
                    <el-input
                        type="password"
                        v-model="form.new_password2"
                        authcomplete="off"
                        placeholder="请重复输入新密码"
                    >
                    </el-input>
                
                </el-form-item>

                <el-form-item class="login_submit">
                    <el-button type="primary" class="login_submit" @click="showVerify">确认修改</el-button>
                </el-form-item>

                <span class="register-font" @click="showLogin()">返回登陆</span> 

            </el-form>
        </transition>
        

        <transition 
            name="animate__animated animate__bounce"
            enter-active-class="animate__swing"
            leave-active-class="animate__rotateOutUpRight"
        >
            <el-form
                :model="form"
                status-icon
                :rules="rules"
                v-show="isVerifyShow"
                ref="form"
                label-width="100px"
                class="slide-container"
                
            >
                <h3 class="login_title">滑动验证码</h3>

                <!-- 滑动验证框 -->
                <div id="slide-verify" >
                    <slide-verify ref="slideblock" @success="onSuccess" @again="onAgain" @fulfilled="onFulfilled" @fail="onFail" @refresh="onRefresh" :slider-text="text" :imgs="imgs" :accuracy="accuracy"></slide-verify>
                    <span><br>{{msg}}</span>
                </div>   
            </el-form>
        </transition>

    </div>
</template>





<script>
    import 'animate.css';
    import * as THREE from 'three'
    import BIRDS from 'vanta/src/vanta.birds'
    import RINGS from 'vanta/src/vanta.rings'
    import GLOBE from 'vanta/src/vanta.globe'
    import WAVES from 'vanta/src/vanta.waves'
    import NET from 'vanta/src/vanta.net'
    import FOG from 'vanta/src/vanta.fog'
    import img0 from '../../src/assets/images/sunset.jpg';
    import img1 from '../../src/assets/images/城市夜景.jpg';
    import img2 from '../../src/assets/images/郊区夜景.jpg';
    import img3 from '../../src/assets/images/巨龙和勇士.jpg';
    import img4 from '../../src/assets/images/piano.png';
    import img5 from '../../src/assets/images/stars.jpg';
    import img6 from '../../src/assets/images/city-beach.jpg';




export default {
    components: {},
    name: 'login',
    data () {
        return {

            userImg: require('../../src/assets/images/user.png'),
            titleImg: require('../../src/assets/images/title.png'),
            // 滑动验证窗口信息
            msg: '',
            text: '向右滑动->',
            imgs: [
                  img0,
                  img1,
                  img2,
                  img3,
                  img4,
                  img5,
                  img6
            ],
            accuracy: 3, // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5

            // 当前操作状态 0：登陆 1：注册 2：找回密码
            status: 0,
    
            
            // 滑动三种窗口是否显示
            isLoginShow: true,
            isRegisterShow: false,
            isVerifyShow: false,
            isUpdateShow: false,


            form: {},
            // 用户名和密码框规则
            rules: {
                
                username: [
                    { required: true, message: "请输入用户名", trigger: "blur"},
                    {
                        min: 3,
                        message: "用户名长度不能小于4位数",
                        trigger: "blur"
                    }
                ],

                password: [
                    { required: true, message: "请输入密码", trigger: "blur"}
                ]
            },
            // 菜单
            menu : [
                {
                path: '/',
                name: 'home',
                label: '系统首页',
                icon: 's-home',
                url: 'Home/Home'
                },
                {
                path: '/log', 
                name: 'log',
                label: '检测日志',
                icon: 'document',
                url: 'LogManage/LogManage'
                },
                {
                path: '/white',
                name: 'white',
                label: '白名单管理',
                icon: 'document-add',
                url: 'WhiteManage/WhiteManage'
                },
                {
                label: '其他',
                icon: 's-unfold',
                children: [
                    {
                    path: '/feedback',
                    name: 'feedback',
                    label: '反馈',
                    icon: 'setting',
                    url: 'Other/feedback'
                    },
                    {
                    path: '/aboutUs',
                    name: 'aboutUs',
                    label: '关于我们',
                    icon: 'setting',
                    url: 'Other/aboutUs'
                    }
                ]
                }
            ],
            // 验证用户名和密码的正则
            regUser : /^[a-zA-Z][a-zA-Z0-9_-]{3,9}$/,
            regPassword : /^[a-zA-Z0-9_,./@#-]{5,15}$/
 
        }
    },
    methods : {
        // 控制三种form的显示
        showVerify(){
            this.isLoginShow = false
            this.isRegisterShow = false
            this.isUpdateShow = false
            setTimeout(()=>{
                this.isVerifyShow = true
            },1500);
        },

        showLogin(){
            this.form = {}
            this.isRegisterShow = false
            this.isVerifyShow = false
            this.isUpdateShow = false

            setTimeout(()=>{
                this.status = 0
                this.isLoginShow = true
            },1500);
        },

        showRegister(){
            this.form = {}
            this.isLoginShow = false
            this.isVerifyShow = false
            this.isUpdateShow = false
            setTimeout(()=>{
                this.status = 1
                this.isRegisterShow = true
            },1500);
        },

        showUpdate(){
            this.form = {}
            this.isLoginShow = false
            this.isVerifyShow = false
            this.isRegisterShow = false
            setTimeout(()=>{
                this.status = 2
                this.isUpdateShow = true
            },1500);
        },

        // 滑动认证窗口函数
        onSuccess(times){
            console.log('验证通过');
            this.msg = `验证成功, 耗时${(times / 1000).toFixed(1)}s`;

            if(this.status == 0)                    this.login()
            else if(this.status == 1)               this.register()
            else if(this.status == 2)               this.updatePwd()

            // 两秒后消失
            setTimeout(()=>{
                this.handleClick()
                if(this.status == 0)                    this.showLogin()
                else if(this.status == 1)               this.showRegister()
                else if(this.status == 2)               this.showUpdate()
            },2500);
        },
        onFail(){
            console.log('验证不通过');
            this.msg = '验证不通过,请重新尝试'
        },
        onRefresh(){
            console.log('点击了刷新小图标');
            this.msg = ''
        },
        onFulfilled() {
            console.log('刷新成功啦！');
            this.msg = ''
        },
        onAgain() {
            console.log('检测到非人为操作的哦！');
            this.msg = 'try again';
            // 刷新
            this.handleClick();
        },
        handleClick() {
            this.$refs.slideblock.reset();
            this.msg = ''
        },

        register(){
            if(this.form.reg_password != this.form.reg_password2){
                this.$message.warning("两次输入密码不一致")
                return 
            }

            if(!this.regUser.test(this.form.reg_username) || !this.regPassword.test(this.form.reg_password)){
                this.$message.warning("用户名或密码格式错误")
                return 
            }

            this.$http.post('http://43.138.136.88:3007/api/regUser',
                'username='+this.form.reg_username+'&'+'password='+this.form.reg_password,
                {headers:{'Content-Type' : 'application/x-www-form-urlencoded'}}
            )
            .then( res => {
                // 注册失败
                if(res.data.status != 0){
                    this.$message.warning(res.data.message)
                }
                // 注册成功
                else{
                    this.$message({
                        type: 'success',
                        message: '注册成功'
                    })
                    this.status = 0
                }
            })

        },
        
        updatePwd(){
            // 检查用户名密码格式
            if(!this.regUser.test(this.form.up_username) || !this.regPassword.test(this.form.old_password)){
                this.$message.warning("用户名或密码格式错误")
                return 
            }

            // 检查两次输入密码是否一致
            if(this.form.new_password != this.form.new_password2){
                this.$message.warning("两次输入密码不一致")
                return 
            }

            // 先使用旧密码登陆
            this.$http.post('http://43.138.136.88:3007/api/login',
                'username='+this.form.up_username+'&'+'password='+this.form.old_password,
                {headers:{'Content-Type' : 'application/x-www-form-urlencoded'}}
            )
            .then(res => {
                // 旧密码登陆失败
                if(res.data.status != 0){
                    return this.$message.warning(res.data.message)
                }
                // 使用登陆成功拿到的token进行修改密码
                else{
                    this.$http.post('http://43.138.136.88:3007/my/updatePwd',
                        'oldPwd='+this.form.old_password+'&'+'newPwd='+this.form.new_password,
                        {headers:{
                            'Content-Type' : 'application/x-www-form-urlencoded',
                            'Authorization' : res.data.token
                        }}
                    )
                    .then(res => {
                        // 密码修改失败
                        if(res.data.status != 0){
                            this.$message.warning(res.data.message)
                        }
                        // 密码修改成功
                        else{
                            this.$message({
                                type: 'success',
                                message: '密码修改成功'
                            })
                            this.status = 0
                        }
                    })
                }
            }
            )

        },

        login() {
            if(!this.regUser.test(this.form.username) || !this.regPassword.test(this.form.password)){
                this.$message.warning("用户名或密码格式错误")
                return 
            }

            this.$http.post('http://43.138.136.88:3007/api/login',
                'username='+this.form.username+'&'+'password='+this.form.password,
                {headers:{'Content-Type' : 'application/x-www-form-urlencoded'}}
            )
            .then((res) => {
                //  登陆失败
                if(res.data.status == 1){
                    this.$message.warning(res.data.message)
                }
                // 登陆成功
                else if(res.data.status == 0){
                    // console.log(res.data.token)
                    this.$message({
                        type: 'success',
                        message: '登陆成功'
                    })
                    this.$store.commit('setToken', res.data.token)
                    console.log("login_data:")
                    console.log(res)
                    console.log()
                    this.$store.commit('setMenu', this.menu)
                    this.$store.commit('addMenu')
                    this.$router.push({name:'home'})    
                }
            })

        }
    },

    mounted() {
        // 随机生成3D动态背景
        var option = Math.floor(Math.random()*6);

        if(option == 5){
            this.vantaEffect = FOG({
                el: this.$refs.vantaRef,
                THREE: THREE
            })
        }
        else if(option == 4){
            this.vantaEffect = NET({
                el: this.$refs.vantaRef,
                THREE: THREE
            })
        }
        else if(option == 3){
            this.vantaEffect = BIRDS({
                el: this.$refs.vantaRef,
                THREE: THREE
            })
        }
        else if(option == 2){
            this.vantaEffect = WAVES({
                el: this.$refs.vantaRef,
                THREE: THREE
            })
        }
        else if(option == 1){
            this.vantaEffect = RINGS({
                el: this.$refs.vantaRef,
                THREE: THREE
            })
        }
        else if(option == 0){
            this.vantaEffect = GLOBE({
                el: this.$refs.vantaRef,
                THREE: THREE
            })
        }

        // 这里重新设置样式
        this.vantaEffect.setOptions({
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
        })

    },
    beforeDestroy() {
        if (this.vantaEffect) {
        this.vantaEffect.destroy()
        }
    }

}

</script>

<style lang="less" scoped>

.login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    
    background-color: rgba(255,255,255,0.8);
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    position: absolute;
    left: 40%;
    top: 5%;


}

.title-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 500px;
    padding: 35px 35px 15px 35px;
    
    background-color: rgba(255,255,255,0.8);
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    position: absolute;
    left: 36%;
    top: -25%;
    // text-align: center;


}

.login_title {
    margin : 0px auto 10px auto;
    text-align: center;
    color: #505458;
}

.login_submit {
    margin: 10px auto 0px auto;
}

.building {
    background:url("../../src/assets/images/stars.jpg");
    width:100%;			
    height:100%;			
    position:fixed;
    background-size:100% 100%;
    // position: relative;
}

.slide-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: auto ;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background-color: rgba(255,255,255,0.8);
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    // transition: 1s linear;
    // transition-delay: 1s;
    position: absolute;
    left: 40%;
    top: 5%;

}

#slide-verify {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    margin: 0px auto;
}


.user-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-left: 110px;
    margin-block: 10px;

}

.my-background {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.register-font {
    float:  left;
    font-size: 12px;
    color: #0000FF;
}

.updatepwd-font {
    float:  right;
    // margin-left: 10px;
    font-size: 12px;
    color: #0000FF;
}
</style>

